<!DOCTYPE html>
<html>
	<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>订单管理</title>
    <link rel="stylesheet" type="text/css"
          href="plugin/jquery-easyui-1.3.3/themes/ui-sunny/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="plugin/jquery-easyui-1.3.3/themes/icon.css">
    <script type="text/javascript"
            src="plugin/jquery-easyui-1.3.3/jquery.min.js"></script>
    <script type="text/javascript"
            src="plugin/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
    <script type="text/javascript"
            src="plugin/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" href="plugin/kindeditor/themes/default/default.css"/>
    <script charset="utf-8" src="plugin/kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="plugin/kindeditor/lang/zh_CN.js"></script>
    <style>.easyui-datagrid{overflow:hidden}</style>
</head>
<body style="margin:1px;margin-top: 3px;" id="ff">
<table id="dg"   class="easyui-datagrid" pagination="true"
       rownumbers="false" fit="true"
       url="/orders/search" toolbar="#tb" style="overflow-x: scroll;" >
    <thead data-options="frozen:false">
    <tr>
        <th field="cb" checkbox="true" align="center"></th>
        <th field="id" width="70" align="center">订单号</th>
        <th field="buyerid" width="50" align="center">买家ID</th>
        <th field="totalPrice" width="80" align="center">总价</th>
        <th field="recipient" width="70" align="center">收件人</th>
        <th field="tel" width="100" align="center">收件人电话</th>
        <th field="address" width="200" align="center">收货地址</th>
        <th field="logistics" width="70" align="center">物流</th>
        <th field="remark" width="70" align="center">备注</th>
        <th field="status" width="80" align="center" formatter="showChineseStatus">状态</th>
        <th field="createTime" width="160" align="center">创建时间</th>
        <th field="orderdetails" width="80" align="center" formatter="showDetails">订单详情</th>
    </tr>
    </thead>
</table>

<div id="tb">
    <div style="margin-top: 10px;margin-bottom: 10px;">
        <a
            href="javascript:openArticleModifyDialog()"
            class="easyui-linkbutton" iconCls="icon-edit" plain="false">编辑</a> 
        <a
            href="javascript:deleteArticle()" class="easyui-linkbutton"
            iconCls="icon-remove" plain="false">删除</a>
    </div>
</div>

<div id="dlg" class="easyui-dialog"
     style="width: 870px;height:455px;padding: 10px 20px; position: relative; z-index:1000;"
     closed="true" buttons="#dlg-buttons">
    <form id="fm" method="post">
        <table cellspacing="15px">
            <tr>
                <td>订单ID：</td>
                <td><span id="orderid"></span>
                <input hidden="true" id="id" name="id" />
                </td>
            </tr>
            <tr>
                <td>收货地址：</td>
                <td>
                <textarea id="address" rows="5" cols="30" name="address" style="font-size: 15px;"></textarea>
                </td>
            </tr>
            <tr>
                <td>订单状态：</td>
                <td>
                    <select id="status" name="status">
                        <option value="0">未发货</option>
                        <option value="1">发货中</option>
                        <option value="2">已完成</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:saveUser()" class="easyui-linkbutton"
       iconCls="icon-ok">保存</a> <a href="javascript:closeArticleDialog()"
                                   class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>

<div id="dlg1" class="easyui-dialog"
     style="width: 870px;height:455px;padding: 10px 20px; position: relative; z-index:1000;"
     closed="true" buttons="#dlg-buttons1">
    <form id="fm" method="post">
        <table id="orderdetail_table" cellspacing="25px" style="width:400px;">
        </table>
    </form>
</div>
<div id="dlg-buttons1">
   <a href="javascript:closeDetailDialog()"
                                   class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>



<script type="text/javascript">
    var url = "/user/insert";
    var method="POST";

    function searchArticle() {
        $("#dg").datagrid('load', {
            "username": $("#articleTitle").val()
        });
    }

    function deleteArticle() {
        var selectedRows = $("#dg").datagrid('getSelections');
        if (selectedRows.length == 0) {
            $.messager.alert("系统提示", "请选择要删除的数据！");
            return;
        }
        var strIds = [];
        for (var i = 0; i < selectedRows.length; i++) {
            strIds.push(selectedRows[i].id);
            if(selectedRows[i].status!=2){
            	alert("订单未完成，无法删除！");
            	return;
            }
        }
        var ids = strIds.join(",");
        $.messager
            .confirm(
                "系统提示",
                "您确认要删除这<font color=red>" + selectedRows.length
                + "</font>条数据吗？",
                function (r) {
                    if (r) {
                        $.ajax({
                            type: "GET",//方法类型
                            dataType: "json",//预期服务器返回的数据类型
                            url: "/orders/delete/" + ids,//url
                            data: {},
                            success: function (result) {
                                console.log(result);//打印服务端返回的数据
                                if (result.resultCode == 200) {
                                    $.messager.alert(
                                        "系统提示",
                                        "数据已成功删除！");
                                    $("#dg").datagrid(
                                        "reload");
                                }
                                else {
                                    $.messager.alert(
                                        "系统提示",
                                        "数据删除失败！");
                                }

                                ;
                            },
                            error: function () {
                                $.messager.alert("ERROR！");
                            }
                        });
                    }
                });

    }

    function openArticleAddDialog() {
        editor.html('请输入内容');
        $("#dlg").dialog("open").dialog("setTitle", "添加文本信息");
        method = "POST";
    }

    function saveUser() {
        var id = $("#id").val();
        var address = $("#address").val();
        var status=$("#status").val();
        var data = {"id":id,"address":address,"status":status};
        $.ajax({
            type: "post",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: url,//url
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(data),
            success: function (result) {
                console.log(result);//打印服务端返回的数据
                if (result.resultCode == 200) {
                    $.messager.alert("系统提示", "保存成功");
                    $("#dlg").dialog("close");
                    $("#dg").datagrid("reload");
                    resetValue();
                }
                else {
                    $.messager.alert("系统提示", "操作失败");
                    $("#dlg").dialog("close");
                    resetValue();
                }
                ;
            },
            error: function () {
                $.messager.alert("系统提示", "操作失败");
            }
        });
    }

    function openArticleModifyDialog() {
        var selectedRows = $("#dg").datagrid('getSelections');
        if (selectedRows.length != 1) {
            $.messager.alert("系统提示", "请选择一条要编辑的数据！");
            return;
        }
        if (selectedRows[0].status==2) {
            $.messager.alert("系统提示", "订单已完成，无法修改！");
            return;
        }
        var row = selectedRows[0];
        $("#dlg").dialog("open").dialog("setTitle", "修改信息");
        $('#fm').form('load', row);
        $('#orderid').text(row.id);
        $("#status").val(row.status);
        url="/orders/update";
    }

    
    function showChineseStatus(value,row,index){
        var st=row.status;
        if(st=='0'){
            return "未发货";
        }
        if(st=='1'){
        	return "发货中";
        }
        if(st=='2'){
        	return "已完成";
        }
    }
    
    function showDetails(value,row,index){
    	var orderid=row.id;
    	var a= `<a style="color:blue" onclick='showOrderDetail(${orderid})' href='javascript:void(0);' target='_blank'>查看详情</a></br>`;
        return a;
    }
    
    function showOrderDetail(orderid){
    	$("#orderdetail_table").append(`
    			<tr>
	                <td>商品ID</td>
	                <td>商品名称</td>
	                <td>数量</td>
                </tr>
                <tr>
                </tr>`);
    	$.ajax({
    		type: "get",
            url: "/orderdetail/selectByOrderid/"+orderid,
            async:false,
            success:function(data){
            	for(let i=0;i<data.length;i++){
            		$("#orderdetail_table").append(`
                            <tr>
                                <td>${data[i].goodsid}</td>
                                <td>${data[i].goodsname}</td>
                                <td>${data[i].goodsnum}</td>
                            </tr>
                            <tr>
                            </tr>`);
            	}
            }
    	});
    	
    	$("#dlg1").dialog("open").dialog("setTitle", "订单详情");
    }

    function resetValue() {
        $("#title").val("");
        $("#addName").val("");
        $("#container").val("");
        editor.html();
    }

    function closeArticleDialog() {
        $("#dlg").dialog("close");
        resetValue();
    }
    
    function closeDetailDialog(){
    	$("#dlg1").dialog("close");
    	$("#orderdetail_table").children().remove();
    }
</script>
</body>
</html>
